<!DOCTYPE html>
<html>
<head>
    <title>Fig. 10.1</title>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // --- Style setup ---
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // --- Helper function for arrows ---
    function drawArrow(fromX, fromY, toX, toY) {
        const headlen = 10;
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);

        // Draw line
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);

        // Draw arrowhead
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // --- Helper function for labels with subscripts ---
    function drawLabelWithSubscript(text, sub, x, y) {
        ctx.textAlign = 'left';
        ctx.textBaseline = 'bottom';
        const mainFont = "22px sans-serif";
        const subFont = "16px sans-serif";
        
        ctx.font = mainFont;
        ctx.fillText(text, x, y);
        
        const mainTextWidth = ctx.measureText(text).width;
        
        ctx.font = subFont;
        ctx.fillText(sub, x + mainTextWidth * 0.75, y + 4);
    }

    // --- Main drawing ---
    
    // Grid coordinates
    const s = 120; // size of the large square
    const gridX = (canvas.width - s) / 2; // 190
    const gridY = 140;

    // Draw grid
    ctx.beginPath();
    ctx.rect(gridX, gridY, s, s); // Outer square
    ctx.moveTo(gridX, gridY + s / 2);     // Horizontal line
    ctx.lineTo(gridX + s, gridY + s / 2);
    ctx.moveTo(gridX + s / 2, gridY);     // Vertical line
    ctx.lineTo(gridX + s / 2, gridY + s);
    ctx.stroke();

    // Draw grid labels (K, L, M, N)
    ctx.font = "24px sans-serif";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText("K", gridX + s / 4, gridY + s / 4);
    ctx.fillText("L", gridX + 3 * s / 4, gridY + s / 4);
    ctx.fillText("N", gridX + s / 4, gridY + 3 * s / 4);
    ctx.fillText("M", gridX + 3 * s / 4, gridY + 3 * s / 4);

    // Draw arrows and their labels
    // D1
    drawArrow(gridX - 90, gridY + s / 2, gridX - 10, gridY + s / 2);
    drawLabelWithSubscript("D", "1", gridX - 110, gridY + s / 2 - 10);

    // D2
    drawArrow(110, 60, 180, 130);
    drawLabelWithSubscript("D", "2", 100, 55);

    // D3
    drawArrow(gridX + s / 2, 50, gridX + s / 2, 130);
    drawLabelWithSubscript("D", "3", gridX + s / 2 + 10, 50);
    
    // D4
    drawArrow(390, 60, 320, 130);
    drawLabelWithSubscript("D", "4", 380, 55);

    // Draw caption
    ctx.font = "bold 20px sans-serif";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'alphabetic';
    ctx.fillText("Fig. 10.1", canvas.width / 2, canvas.height - 30);

</script>
</body>
</html>